<template>
  <div id="app">
    <router-link to="/aboutus">关于我们link</router-link>
    <router-link to="/hotnews">最热新闻link</router-link>
    <!-- 声明式导航的传参 -->
    <!-- /path?参数名=值  用$route.query.key 取值 -->
    <router-link to="/listview?title=111">列表页</router-link>
    <!-- /值 进行传递参数 用$route.params.key取值 -->
    <router-link to="/goodsview/g001">商品详情页</router-link>
    <!-- 7. 用router-view作为挂载点, 切换不同的路由页面 -->
    <div class="com">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
a {
  text-decoration: none;
  color: #666;
}
#app a {
  margin-right: 10px;
}
.com {
  width: 400px;
  height: 200px;
  border: 1px solid red;
}
.router-link-active {
  color: red;
}
</style>
